<template>
  <div class="scale-data-info">
    <div class="scale-data-info-left">
      <dv-active-ring-chart :config="config1" style="width:100%;height:17vh" />
    </div>
    <div class="scale-data-info-right">
      <dv-active-ring-chart :config="config2" style="width:100%;height:17vh" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    industryData: {
      type: Array,
      default() {
        return []
      }
    },
    typeData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      config1: {
        radius: '80%',
        activeRadius: '85%',
        data: [],
        digitalFlopStyle: {
          fontSize: 15
        },
        showOriginValue: true
      },
      config2: {
        radius: '80%',
        activeRadius: '85%',
        data: [],
        digitalFlopStyle: {
          fontSize: 15
        },
        showOriginValue: true
      }
    }
  },
  watch: {
    industryData(val) {
      for (let i = 0; i < val.length; i++) {
        this.config1.data.push({
          name: val[i].title,
          value: val[i].num
        })
      }
      this.config1 = { ...this.config1 }
    },
    typeData(val) {
      for (let i = 0; i < val.length; i++) {
        this.config2.data.push({
          name: val[i].title,
          value: val[i].num
        })
      }
      this.config2 = { ...this.config2 }
    }
  }
}
</script>

<style lang="scss" scoped>
.scale-data-info {
  display: flex;
  justify-content: space-between;
  .scale-data-info-left {
    width: 50%;
    min-height: 120px;
  }
  .scale-data-info-right {
    width: 50%;
    min-height: 120px;
  }
}
</style>
